var data = {

}
init()
function init() {
    var echart1 = document.getElementById("echart1");
    var echart2 = document.getElementById("echart2");
    var echart3 = document.getElementById("echart3");
    var echart4 = document.getElementById("echart4");
    var echart5 = document.getElementById("echart5");
    var echart6 = document.getElementById("echart6");
    var echart7 = document.getElementById("echart7");
    var echart8 = document.getElementById("echart8");
    // var echart9 = document.getElementById("echart9");
    var myChart1 = echarts.init(echart1);
    var myChart2 = echarts.init(echart2);
    var myChart3 = echarts.init(echart3);
    var myChart4 = echarts.init(echart4);
    var myChart5 = echarts.init(echart5);
    var myChart6 = echarts.init(echart6);
    var myChart7 = echarts.init(echart7);
    var myChart8 = echarts.init(echart8);
    var option1 = {
        title: {
            text: "建房类型",
            x: "center",
            y: "50%",
            textStyle: {
                fontSize: 15,
                color: 'white',
                fontFamily: 'SimHei',
                fontWeight: 'normal',
            }
        },
        color: [
            "#f7b726",
            "#16de93",
            "#2999fe"
        ],
        tooltip: {
            show: true,
            trigger: "item",
            formatter: "{a}{b} : {c} ({d}%)",
            /* formatter(params){
                return '2222'
            } */
        },
        calculable: true,
        series: [
            {
                name: "",
                type: "pie",
                radius: [55, 75],
                center: ["50%", "55%"],
                data: [
                    { value: 731, name: "原址翻建" },
                    { value: 521, name: "改扩建" },
                    { value: 321, name: "异址新建" }
                ],
                label: {
                    // percentPrecision: 1,
                    normal: {
                        alignTo: 'edge',
                        edgeDistance: "10%",
                        formatter: name => {
                            // before是白色的字
                            var before = "{name|" + name.name + "\n" + "}"
                            console.log(name);
                            if (name.name === "原址翻建") {
                                // return before+name
                                return (before + "{name1|" + name.value + "户}")
                            } else if (name.name === "改扩建") {
                                return (before + "{name2|" + name.value + "户}")
                            } else {
                                return (before + "{name3|" + name.value + "户}")
                            }
                        },
                        rich: {
                            name: {
                                color: '#fff',
                                borderWidth: 1,
                                borderRadius: 20,
                                fontSize: 12,
                                lineHeight: 20,
                            },
                            name1: {
                                color: '#f7b726',
                                borderWidth: 1,
                                borderRadius: 20,
                                fontSize: 14,
                                lineHeight: 20,
                            },
                            name2: {
                                color: '#16de93',
                                borderWidth: 1,
                                borderRadius: 20,
                                fontSize: 14,
                                lineHeight: 20,
                            },
                            name3: {
                                color: '#2999fe',
                                borderWidth: 1,
                                borderRadius: 20,
                                fontSize: 14,
                                lineHeight: 20,
                            },
                        },
                    },
                },

                /* labelLine: {
                    length: 20,
                    length2: 35,
                }, */
            },
        ],
    };


    var echartData = [
        {
            value: 200,
            name: '改扩建',
            itemStyle: {
                normal: { //颜色渐变
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 1,
                        [{
                            offset: 1,
                            color: '#3aadc5'
                        },
                        {
                            offset: 0,
                            color: '#113b58'
                        }
                        ]
                    )
                }
            }

        }, {
            value: 200,
            name: '原址翻建',
            itemStyle: {
                normal: { //颜色渐变
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 1,
                        [{
                            offset: 0,
                            color: '#f88b8a'
                        },
                        {
                            offset: 1,
                            color: '#78495a'
                        }
                        ]
                    )
                }
            }

        }, {
            value: 200,
            name: '异址扩建',
            itemStyle: {
                normal: { //颜色渐变
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 1,
                        [{
                            offset: 0,
                            color: '#0195e3'
                        },
                        {
                            offset: 1,
                            color: '#07538a'
                        }
                        ]
                    )
                }
            }

        }, {
            value: 200,
            name: '有偿退出',
            itemStyle: {
                normal: { //颜色渐变
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 1,
                        [{
                            offset: 0,
                            color: '#33b0f2'
                        },
                        {
                            offset: 1,
                            color: '#0d3459'
                        }
                        ]
                    )
                }
            }

        }, {
            value: 200,
            name: '无偿退出',
            itemStyle: {
                normal: { //颜色渐变
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [{
                            offset: 0,
                            color: '#316bee'
                            // color: '#fff'
                        },
                        {
                            offset: 1,
                            // color: 'transparent'
                            color: '#183880'
                        }
                        ]
                    )
                }
            }

        }
    ]
    var total_datas = 0;
    for (var i = 0; i < echartData.length; i++) {
        total_datas += echartData[i].value
    }

    /* var rich = {
        yellow: {
            color: "#ffc72b",
            fontSize: 10,
            // padding: [21, 0],
            align: 'center'
        },
        total: {
            color: "#ffc72b",
            fontSize: 10,
            align: 'center'
        },

        blue: {
            color: '#49dff0',
            fontSize: 10,
            align: 'center'
        },
        hr: {
            borderColor: '#0b5263',
            width: '100%',
            borderWidth: 1,
            height: 0,
        }
    } */
    var option7 = {
        title: {
            text: '宅基地',
            textStyle: {
                color: '#fff',
                fontSize: 12,
                align: 'center'
            },

            x: 'center',
            y: 'center',
        },
        tooltip: {
            show: false,
            trigger: "item",
            // formatter: "{a}{b} : {c} ({d}%)",
            position: ["50%", "50%"]
            // position: [10, 10]
        },
        legend: {
            show: false,
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） | 'vertical'（垂直）
            orient: 'vertical',
            // x 设置水平安放位置，默认全图居中，可选值：'center' | 'left' | 'right' | {number}（x坐标，单位px）
            x: 'left',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
            y: 'center',
            itemWidth: 24, // 设置图例图形的宽
            itemHeight: 18, // 设置图例图形的高
            textStyle: {
                color: '#666' // 图例文字颜色
            },
            // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
            itemGap: 30,
            data: ['正常使用', '改扩建', '原址翻建', '异址扩建', '有偿退出', '无偿退出']
        },
        series: [{
            name: '小环',
            type: 'gauge',
            splitNumber: 12,
            radius: '60%',
            center: ['50%', '50%'],
            startAngle: 0,
            endAngle: 359.9999,
            axisLine: {
                show: false
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: "#027383",
                    width: 3,
                    shadowBlur: 1,
                },
                length: 5,
                splitNumber: 3
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            detail: {
                show: false
            }
        }, {
            name: '宅基地',
            type: 'pie',
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    borderColor: "#030d22"
                }
            },
            radius: ['38%', '50%'],
            // radius: ['90%', '100%'],
            hoverAnimation: false,
            color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
            label: {
                show: false,
                percentPrecision: 1,
                formatter: name => {
                    // before是白色的字
                    var before = "{name|" + name.name + "\n" + "}"
                    console.log(name);
                    if (name.name === "正常使用") {
                        return (before + "{name1|" + name.value + "宗," + name.percent + "%}")
                    } else if (name.name === "改扩建") {
                        return (before + "{name2|" + name.value + "宗," + name.percent + "%}")
                    } else if (name.name === "原址翻建") {
                        return (before + "{name3|" + name.value + "宗," + name.percent + "%}")
                    } else if (name.name === "异址扩建") {
                        return (before + "{name4|" + name.value + "宗," + name.percent + "%}")
                    } else if (name.name === "有偿退出") {
                        return (before + "{name5|" + name.value + "宗," + name.percent + "%}")
                    } else if (name.name === "无偿退出") {
                        return (before + "{name6|" + name.value + "宗," + name.percent + "%}")
                    }
                    return before
                },
                rich: {
                    name: {
                        color: '#fff',
                        borderWidth: 1,
                        borderRadius: 20,
                        fontSize: 10,
                        // lineHeight: 20,
                    },
                    name1: {
                        color: '#c9a34e',
                        borderWidth: 1,
                        borderRadius: 20,
                        fontSize: 10,
                    },
                    name2: {
                        color: '#3aadc5',
                        borderWidth: 1,
                        borderRadius: 20,
                        fontSize: 10,
                    },
                    name3: {
                        color: '#f88b8a',
                        borderWidth: 1,
                        borderRadius: 20,
                        fontSize: 10,
                    },
                    name4: {
                        color: '#0195e3',
                        borderWidth: 1,
                        borderRadius: 20,
                        fontSize: 10,
                    },
                    name5: {
                        color: '#33b0f2',
                        borderWidth: 1,
                        borderRadius: 20,
                        fontSize: 10,
                    },
                    name6: {
                        color: '#316bee',
                        borderWidth: 1,
                        borderRadius: 20,
                        fontSize: 10,
                    },
                },
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '12',
                }
            },
            labelLine: {
                length: 0,
                length2: 0,
            },
            data: echartData
        }]
    };
    var option8 = {
        // backgroundColor: '#060d22',
        title: {
            text: '农民房屋',
            subtext: "",
            textStyle: {
                color: '#fff',
                fontSize: 15,
                align: 'center'
            },
            x: 'center',
            y: 'center',
        },
        tooltip: {
            show: true,
            trigger: "item",
            // formatter: "{a}{b} : {c} ({d}%)",
            position: ["50%", "50%"]
            // position: [10, 10]
        },
        legend: {
            show: false,
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） | 'vertical'（垂直）
            orient: 'vertical',
            // x 设置水平安放位置，默认全图居中，可选值：'center' | 'left' | 'right' | {number}（x坐标，单位px）
            x: 'left',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
            y: 'center',
            itemWidth: 24, // 设置图例图形的宽
            itemHeight: 18, // 设置图例图形的高
            textStyle: {
                color: '#666' // 图例文字颜色
            },
            // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
            itemGap: 30,
            data: ['正常使用', '改扩建', '原址翻建', '异址扩建', '有偿退出', '无偿退出']
        },
        series: [{
            name: '小环',
            type: 'gauge',
            splitNumber: 12,
            radius: '75%',
            center: ['50%', '50%'],
            startAngle: 0,
            endAngle: 359.9999,
            axisLine: {
                show: false
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: "#027383",
                    // color: "#fff",
                    width: 3,
                    shadowBlur: 1,
                    // shadowColor: color[1],
                },
                length: 5,
                splitNumber: 3
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            detail: {
                show: false
            }
        }, {
            name: '宅基地',
            type: 'pie',
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    borderColor: "#030d22"
                }
            },
            radius: ['58%', '70%'],
            // radius: ['90%', '100%'],
            hoverAnimation: false,
            color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
            label: {
                show: false,
                percentPrecision: 1,
                formatter: name => {
                    // before是白色的字
                    var before = "{name|" + name.name + "\n" + "}"
                    /* console.log(name);
                    if (name.name === "原址翻建") {
                        return (before + "{name1|" + name.value + "户}")
                    } else if (name.name === "改扩建") {
                        return (before + "{name2|" + name.value + "户}")
                    } else {
                        return (before + "{name3|" + name.value + "户}")
                    } */
                },
                rich: {
                    name: {
                        color: '#fff',
                        borderWidth: 1,
                        borderRadius: 20,
                        fontSize: 12,
                        lineHeight: 20,
                    },
                    name1: {
                        color: '#f7b726',
                        borderWidth: 1,
                        borderRadius: 20,
                        fontSize: 14,
                        lineHeight: 20,
                    },
                    name2: {
                        color: '#16de93',
                        borderWidth: 1,
                        borderRadius: 20,
                        fontSize: 14,
                        lineHeight: 20,
                    },
                    name3: {
                        color: '#2999fe',
                        borderWidth: 1,
                        borderRadius: 20,
                        fontSize: 14,
                        lineHeight: 20,
                    },
                },
            },
            /* labelLine: {
                length: 20,
                length2: 35,
                // maxSurfaceAngle: 80
            }, */
            data: echartData
        }]
    };
    // 中间下面的双柱状图
    var option2 = {
        // backgroundColor: 'rgba(10, 0, 42, 1)',
        grid: {
            left: "3%",
            //   right: "2%",
            bottom: "0%",
            top: "10%",
            containLabel: true
        },
        tooltip: {
            show:true,
            // 开启则显示这一组数据
            trigger: 'axis',
            backgroundColor: '#0071ff',
            borderColor:'#0071ff',
            // extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)',
            textStyle: {
                color:'#fff',
            },
            axisPointer: {
                type: 'shadow'
            }
        },
       
        legend: {
            icon: 'circle',
            top: '0%',
            left: '40%',
            itemWidth: 10,
            itemHeight: 10,
            data: ['宅基地面积', '超占面积'],
            itemGap: 60,
            // padding:[20,0,0,0],
            textStyle: {
                color: '#fff',
                // lineHeight:5
            }
        },
        xAxis: {
            type: "category",
            boundaryGap: true,
            data: ['a市', 'b市', 'c市', 'd市', 'e市', 'f市', 'g市', 'h市', 'i市', 'j市', 'k市', 'l市', 'm市'],
            show: true,
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: 10
                }
            },
            axisTick: {
                show: false,
                // length: 9,
                alignWithLabel: true,
                lineStyle: {
                    color: "#fff",
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    // x轴坐标轴的线
                    color: "#303546", type: "solid"
                },
            },
        },
        yAxis: {
            nameLocation: 'end',
            name: "单位：㎡",
            nameTextStyle: {
                color: "#ccc",
                fontSize: 12,
                padding: [0, 0, -10, 0]
            },
            boundaryGap: [0, 0.1],
            min: 0,
            max: 2000,
            interval: 500,
            type: 'value',
            // splitNumber: 5,
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: 10
                }
            },
            // Y轴刻度线
            axisTick: {
                show: false,
                length: 9,
                alignWithLabel: true,
                lineStyle: {
                    color: "#fff",
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    // x轴坐标轴的线
                    color: "#4a4f5c", type: "solid"
                },
            },

            splitLine: {
                show: true,
                lineStyle: {
                    color: '#585c69',
                    type: "solid"
                }
            }
        },
        series: [{
            backgroundColor: 'rgba(36, 53, 135, 0.298039215686275)',
            name: '宅基地面积',
            type: 'bar',
            barWidth: 12,
            smooth: true,
            // stack: '使用情况',
            data: [1200, 1500, 1500, 1500, 1100, 1550, 1300, 1000, 800, 1200, 1400, 1700, 1800],
            itemStyle: {
                normal: {
                    color: "#07f7ce",
                    lineStyle: {
                        width: 1// 0.1的线条是非常细的了
                    }
                },
            },
        }, {
            name: '超占面积',
            type: 'bar',
            barWidth: 12,
            smooth: true,
            // stack: '使用情况',
            data: [600, 600, 700, 600, 300, 200, 600, 600, 500, 600, 800, 500, 600],
            itemStyle: {
                normal: {
                    color: "#cd464b", lineStyle: {
                        width: 1// 0.1的线条是非常细的了
                    }
                },
            },

        }
        ]
    }
    var color_offset_0 = "#19fdab";
    var color_offset_1 = "#d0ff19";
    var color_offset_2 = "#ff4026";
    var anchor_color = "#0e1327";
    var anchor_size = 10;
    var pointer_color_offset_0 = "#FEAD54";
    var pointer_color_offset_1 = "#0e1327";
    var option3 = {
        title: {
            show: true,
            text: "用地指标",
            left: 0,
            top: 0,
            textStyle: {
                color: "#ccc",
                fontFamily: "Microsoft YaHei",
                fontSize: 15,
            },
        },
        series: [
            {
                data: [90],
                name: "最外层",
                type: "gauge",
                roundCap: true,
                radius: "105%",
                center: ["50%", "75%"],
                splitNumber: 0, //刻度数量
                startAngle: 210,
                endAngle: -30,
                z: 4,
                zlevel: 0,
                axisLine: {
                    show: true,
                    roundCap: true,
                    lineStyle: {
                        // 轴线样式
                        width: 8, // 宽度
                        color: [
                            [
                                1,
                                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {
                                        offset: 0,
                                        color: color_offset_0,
                                    },
                                    {
                                        offset: 0.5,
                                        color: color_offset_1,
                                    },
                                    {
                                        offset: 1,
                                        color: color_offset_2,
                                    },
                                ]),
                            ],
                        ],
                    },
                },
                //分隔线样式
                splitLine: {
                    show: false,
                    length: 12, //长刻度节点线长度
                    lineStyle: {
                        width: 2,
                        color: "#c4c6cc"
                    } //刻度节点线
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: true,
                },
                anchor: {
                    show: true,
                    size: 5,
                    showAbove: true,
                    itemStyle: {
                        color: "#007dff",
                    },
                },
                // 中间指针
                pointer: {
                    icon:
                        'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                    length: '70%',
                    width: 7,
                    offsetCenter: [0, '5%'],
                },
                detail: {
                    color: "white",
                    fontStyle: "normal",
                    fontWeight: "normal",
                    fontFamily: "Impact",
                    fontSize: 20,
                    offsetCenter: ["0%", "20%"],
                },
            },
            {
                name: "第二层刻度",
                type: "gauge",
                center: ["50%", "75%"],
                radius: "100%",
                // distance : 100,
                startAngle: 210,
                endAngle: -30,
                axisLine: {
                    show: false,
                }, //仪表盘轴线
                axisLabel: {
                    show: false,
                    color: "#FFFFFF",
                    distance: 20,
                },
                //刻度标签。
                axisTick: {
                    show: false,
                    splitNumber: 5,
                    lineStyle: {
                        // color: "#0e1f61", //用颜色渐变函数不起作用
                        color: "skyblue", //用颜色渐变函数不起作用
                        width: 1,
                    },
                    distance: 20,
                    length: 10,
                },
                splitLine: {
                    show: false,
                },
                detail: {
                    show: false,
                },
                pointer: {
                    show: false,
                },
            },
            // 外部蓝色线
            {
                splitNumber: 2,
                max: 150,
                name: "内部细刻度",
                type: "gauge",
                center: ["50%", "75%"],
                radius: "120%",
                startAngle: 210,
                endAngle: -30,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 5,
                        color: [
                            [
                                1,
                                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {
                                        offset: 0,
                                        color: "#2c6ed7",
                                    },
                                    {
                                        offset: 1,
                                        color: "#05bbc9",
                                    },
                                ]),
                            ],
                        ],
                    },
                },
                //仪表盘轴线
                axisTick: {
                    show: false,
                },
                //刻度线文字 刻度线数字
                axisLabel: {
                    show: false,
                    // color: "#6f7580",
                    fontSize: 10,
                    // distance: 100,
                    startAngle: 210,
                    endAngle: -30,
                    fontSize: 12,
                    color: 'white',
                    splitNumber: 5,
                },
                splitLine: {
                    show: false,
                },
                detail: {
                    show: false,
                },
                pointer: {
                    show: false,
                },
            },
            // 刻度线数字
            {
                type: 'gauge',
                radius: '110%',
                splitNumber: 3,
                center: ["50%", "75%"],
                max: 150,
                //刻度标签。
                axisTick: {
                    show: true,
                    splitNumber: 15,
                    lineStyle: {
                        // color: "#0e1f61", //用颜色渐变函数不起作用
                        color: "skyblue", //用颜色渐变函数不起作用
                        width: 1,
                    },
                    distance: 5,
                    length: 10,
                },
                axisLine: {
                    show: false,
                    roundCap: true,
                },
                axisLabel: {
                    show: true,
                    color: '#fff',
                    fontSize: 12,
                },
            }
        ],
    };
    var option4 = {
        // color: ["#22dea4", "#eaba00"],
        color: [new echarts.graphic.LinearGradient(
            0, 0, 0, 1,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
            [
                { offset: 1, color: "#034e52" },
                
                { offset: 0, color: '#22dea4' }
            ]                //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
        ), new echarts.graphic.LinearGradient(
            0, 0, 0, 1,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
            [
                { offset: 1, color: "#6c5811" },
                
                { offset: 0, color: '#eaba00' }
            ]                //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
        )],
        title: {
            show: true,
            text: "违法查处情况",
            left: 0,
            top: 0,
            textStyle: {
                color: "#ccc",
                fontFamily: "Microsoft YaHei",
                fontSize: 15,
            },
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
        },
        legend: {
            data: ["已结案", "已立案"],
            top: 15,
            right: "center",
            itemHeight: 7, //修改icon图形大小
            itemWidth: 10,
            itemGap: 40,
            // width:10,
            textStyle: {
                color: "#fff",
                fontSize: 14,
                fontWeight: 'normal'
            },
            icon: "circle",
        },
        grid: {
            left: "10",
            right: "10",
            bottom: "17",
            containLabel: true,
        },
        xAxis: [
            {
                type: "category",
                data: ["非法转让土地", "破坏耕地", "非法占地", "拒不交还土地", "其他"],
                axisTick: { show: false },
                axisLabel: {
                    textStyle: { color: "#fff", fontSize: 10 },
                },
                axisLine: {
                    lineStyle: { color: "#5d616d", type: "solid" },
                },
            },
        ],
        yAxis: [
            {
                type: "value",
                name: "单位：件",
                nameLocation: 'end',
                nameTextStyle: {
                    color: "#7e7e7e", fontSize: 14,
                    padding: [0, 0, -10, 20],
                },
                boundaryGap: [0, 0.1],
                max: 20,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#fff",
                        fontSize: 10
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#5d616d",
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "#5d616d"
                    }
                }
            },
        ],
        series: [
            {
                name: "已结案",
                type: "bar",
                stack: 'bar1',
                data: [10, 10, 10, 10, 10],
                barWidth: 12,
                label: {
                    show: false,
                    fontWeight: 'normal',
                    position: 'top',
                    color: "#555"
                },
            },
            {
                name: "已立案",
                type: "bar",
                stack: 'bar1',
                data: [10, 10, 10, 10, 10],
                barWidth: 12,
                label: {
                    show: false,
                    fontWeight: 'normal',
                    position: 'top',
                    color: "#555"
                },
            },

        ],
    };
    var giftImageUrl = "";
    var option5 = {
        tooltip: {
            show: false,
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)",

        },
        graphic: {
            elements: [{
                type: 'image',
                style: {
                    image: giftImageUrl,
                    width: 36,
                    height: 36
                },
                left: 'center',
                top: 'center'
            }]
        },
        title: {
            text: '类型分析',
            show: false,
            left: 'center',
            top: '55%',
            padding: [24, 0],
            textStyle: {
                color: '#fff',
                fontSize: 20,
                align: 'center'
            }
        },
        legend: {
            show: false,
            orient: 'horizontal',
            icon: 'circle',
            bottom: 20,
            x: 'center',
            data: ['转让', '互换', '入股', '赠与', '出租', '其他'],
            textStyle: {
                color: '#fff',
                fontSize: 12
            }
        },
        series: [
            //外边框
            {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                    [
                        { offset: 1, color: '#527cca' },
                        { offset: 0.5, color: '#527cca' },
                        { offset: 0, color: '#fbb900' }
                    ]                //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                ),
                name: '外边框',
                type: 'pie',
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                center: ['50%', '50%'],
                radius: ['65%', '65%'],
                label: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                    value: 9,
                    name: '',
                    itemStyle: {
                        normal: {
                            borderWidth: 2,
                            borderColor: "#003463",
                        }
                    }
                }]
            },
            {
                type: 'pie',
                hoverAnimation: false,
                legendHoverLink: false,
                radius: ['48%', '55%'],
                color: ['#3efaf9', '#00d0fc', '#b040ff', '#f66967', '#f1b563', '#f1b563', '#fc4a00'],
                label: {
                    normal: {
                        show: false,
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    },
                },
                tooltip: {
                    show: false,
                },

                data: [{
                    value: 100,
                    name: '转让'
                },
                {
                    value: 100,
                    name: '互换'
                },
                {
                    value: 100,
                    name: '入股'
                },
                {
                    value: 100,
                    name: '赠与'
                },
                {
                    value: 100,
                    name: '出租'
                },
                {
                    value: 100,
                    name: '其他'
                }]
            },
            {
                type: 'pie',
                radius: ['43%', '55%'],
                color: ['#00FFFF', '#44EAB1', '#7BDD43', '#FEBE12', '#EBEC2F', '#FF7C44', '#FA3E5F', '#6635EF', '#FFAFDA'],
                labelLine: {
                    normal: {
                        show: true,
                        length: 10,
                        length2: 0,
                        lineStyle: {
                            width: 2,
                            color: 'transparent'
                        }
                    }
                },
                label: {
                    show: true,
                    formatter: name => {
                        // console.log('name', name);
                        var before = "{name|" + name.name + "}"
                        return (before + " " + "{name|" + name.value + "   " + name.percent.toFixed(1) + "%}")
                    },
                    rich: {
                        name: {
                            color: '#fff',
                            borderWidth: 1,
                            borderRadius: 20,
                            fontSize: 12,
                            lineHeight: 20,
                        },

                    },

                },
                data: [
                    {
                        value: 100,
                        name: '转让'
                    },
                    {
                        value: 100,
                        name: '互换'
                    },
                    {
                        value: 100,
                        name: '入股'
                    },
                    {
                        value: 100,
                        name: '赠与'
                    },
                    {
                        value: 100,
                        name: '出租'
                    },
                    {
                        value: 100,
                        name: '其他'
                    }
                ]
            }
        ]
    };
    var data = [
        {
            value: 280,
            name: '有偿退出'
        },
        {
            value: 280,
            name: '无偿退出'
        }
    ];
    var color = ['#00f5f7', '#ffcc00'];
    var data1 = data[0].value + data[1].value;
    var baseData = [];
    for (var i = 0; i < data.length; i++) {
        baseData.push({
            value: data[i].value,
            name: data[i].name,
            itemStyle: {
                normal: {
                    borderWidth: 22,
                    shadowBlur: 50,
                    borderColor: color[i],
                    shadowColor: 'rgba(0, 0, 0, 0.8)'
                }
            }
        });
    }
    var option6 = {
        title: {
            text: "{title|" + 280 + "}{title2|宗}" + "\n" + "{value|50%}",
            left: "center",
            top: "center",
            textStyle: {
                rich: {
                    title: {
                        fontSize: 19,
                        color: '#00fbfd',
                        padding: [0, 0, 1, 0],
                        fontFamily: 'Impact',
                        lineHeight: 19,
                    },
                    value: {
                        color: "#fff",
                        fontSize: 11,
                        lineHeight: 19,
                    },
                    title2: {
                        fontSize: 11,
                        color: "#9fa0a5",
                        lineHeight: 30,
                    }
                }
            }
        },
        color: color,
        tooltip: {
            show: true,
            trigger: 'item',
            // formatter: "{a}：{b} <br/>占比：{d}%"
            formatter: "{b} <br/>占比：{d}%"
        },
        legend: {
            data: ['有偿退出', '无偿退出'],
            orient: "vertical",
            top: "middle",
            right: 10,
            // itemWidth: 46,
            itemGap: 25,//图例图标与文字间的间距
            itemHeight: 10, //修改icon图形大小
            itemWidth: 20,
            textStyle: {
                color: "#fff",
                fontSize: 12,
                fontWeight: 'normal'
            },
            icon: "circle",
        },
        series: [
            // 中间的实心圆环
            {
                name: "",
                type: "pie",
                radius: [45, 50],
                center: ["50%", "50%"],
                data: [
                    {
                        value: 280, name: "有偿退出",
                    },
                    { value: 280, name: "无偿退出" }
                ],
                label: {
                    show: false,
                    percentPrecision: 1,
                    formatter: name => {
                        var before = "{name|" + name.name + "\n" + "}"
                        if (name.name === "开工放样") {
                            return (before + "{name2|" + name.percent.toFixed(1) + "%}")
                        } else if (name.name === "竣工验收") {
                            return (before + "{name3|" + name.percent.toFixed(1) + "%}")
                        } else {
                            return (before + "{name1|" + name.percent.toFixed(1) + "%}")
                        }
                    },
                    rich: {
                        name: {
                            color: '#000',
                            borderWidth: 1,
                            borderRadius: 20,
                            fontSize: 12,
                            lineHeight: 20,
                        },
                        name1: {
                            color: '#3f7ef3',
                            borderWidth: 1,
                            borderRadius: 20,
                            fontSize: 14,
                            lineHeight: 20,
                        },
                        name2: {
                            color: '#f6d778',
                            borderWidth: 1,
                            borderRadius: 20,
                            fontSize: 14,
                            lineHeight: 20,
                        },
                        name3: {
                            color: '#b18bde',
                            borderWidth: 1,
                            borderRadius: 20,
                            fontSize: 14,
                            lineHeight: 20,
                        },
                    },
                },
                labelLine: {
                    length: 30,
                    length2: 75,
                    maxSurfaceAngle: 80
                },
            },
            // 最外层天蓝色
            {
                name: "第二层刻度",
                type: "gauge",
                center: ["50%", "50%"],
                radius: "145%",
                // distance : 100,
                startAngle: 0,
                endAngle: 359,
                axisLine: {
                    show: false,
                }, //仪表盘轴线
                axisLabel: {
                    show: false,
                    color: "#FFFFFF",
                    distance: 20,
                }, //刻度标签。
                axisTick: {
                    show: true,
                    splitNumber: 7,
                    lineStyle: {
                        color: "#00fafa", //用颜色渐变函数不起作用
                        width: 1,
                    },
                    distance: 20,
                    length: 6,
                },
                splitLine: {
                    show: false,
                },
                detail: {
                    show: false,
                },
                pointer: {
                    show: false,
                },
            },
        ]
    };

    // option9
    var gulou = '/data/gulou.json';
    var jiangning = '/data/jiangning.json';
    var jianye = '/data/jianye.json';
    var liuhe = '/data/liuhe.json';
    var pukou = '/data/pukou.json';
    var qinhuai = '/data/qinhuai.json';
    var qixia = '/data/qixia.json';
    var sishui = '/data/sishui.json';
    var xuanwu = '/data/xuanwu.json';
    var yuhuatai = '/data/yuhuatai.json';
    var nanjing = '/data/map.json';
    echarts.extendsMap = function (id, opt) {
        // 实例
        var chart = this.init(document.getElementById(id));
        var curGeoJson = {};
        var cityMap = {
            "鼓楼区": gulou,
            "江宁区": jiangning,
            "建邺区": jianye,
            "六合区": liuhe,
            "浦口区": pukou,
            "秦淮区": qinhuai,
            "栖霞区": qixia,
            "溧水区": sishui,
            "玄武区": xuanwu,
            "雨花台区": yuhuatai,
        }
        /* var cityMap = {
            "南昌市": nanchang,
            "景德镇市": jingdezhen,
            "萍乡市": pingxiang,
            "九江市": jiujiang,
            "新余市": xinyu,
            "鹰潭市": yingtan,
            "赣州市": ganzhou,
            "吉安市": jian,
            "宜春市": yichun,
            "抚州市": fuzhou,
            "上饶市": shangrao
        }; */
        /* var geoCoordMap = {
            '南昌': [115.89, 28.48],
            '景德镇': [117.28, 29.09],
            '萍乡': [113.93, 27.41],
            '九江': [115.97, 29.51],
            '新余': [114.81, 27.72],
            '鹰潭': [117.12, 28.10],
            '赣州': [115.04, 25.67],
            '吉安': [115.05, 26.88],
            '宜春': [114.41, 28.03],
            '抚州': [116.45, 27.79],
            '上饶': [117.92, 28.22]
        }; */
       /*  var geoCoordMap = {
            "鼓楼": [
                118.769739,
                32.066966
            ],
            "江宁": [
                118.850621,
                31.953418
            ],
            "建邺": [
                118.732688,
                32.004538
            ],
            "六合": [
                118.85065,
                32.340655
            ],
            "浦口": [
                118.625307,
                32.05839
            ],
            "秦淮": [
                118.786088,
                32.033818
            ],
            "栖霞": [
                118.808702,
                32.102147
            ],
            "溧水": [
                119.028732,
                31.653061
            ],
            "玄武": [
                118.792199,
                32.050678
            ],
            "雨花台": [
                118.77207,
                31.995946
            ]
        }; */
        var levelColorMap = {
            '1': 'rgba(241, 109, 115, .8)',
            '2': 'rgba(255, 235, 59, .7)',
            '3': 'rgba(147, 235, 248, 1)'
        };

        var defaultOpt = {
            mapName: 'china',     // 地图展示
            goDown: false,        // 是否下钻
            bgColor: '#404a59',   // 画布背景色
            activeArea: [],       // 区域高亮,同echarts配置项
            data: [],
            // 下钻回调(点击的地图名、实例对象option、实例对象)
            callback: function (name, option, instance) { }
        };
        if (opt) opt = this.util.extend(defaultOpt, opt);

        // 层级索引
        var name = [opt.mapName];
        var idx = 0;
        var pos = {
            leftPlus: 115,
            leftCur: 150,
            left: 198,
            top: 50
        };

        var line = [[0, 0], [8, 11], [0, 22]];
        // style
        var style = {
            font: '18px "Microsoft YaHei", sans-serif',
            textColor: '#eee',
            lineColor: 'rgba(147, 235, 248, .8)'
        };

        var handleEvents = {
            /**
             * i 实例对象
             * o option
             * n 地图名
            **/
            resetOption: function (i, o, n) {
                var breadcrumb = this.createBreadcrumb(n);

                var j = name.indexOf(n);
                var l = o.graphic.length;
                if (j < 0) {
                    o.graphic.push(breadcrumb);
                    o.graphic[0].children[0].shape.x2 = 145;
                    o.graphic[0].children[1].shape.x2 = 145;
                    if (o.graphic.length > 2) {
                        for (var x = 0; x < opt.data.length; x++) {
                            if (n === opt.data[x].name + '市') {
                                o.series[0].data = handleEvents.initSeriesData([opt.data[x]]);
                                break;
                            } else o.series[0].data = [];
                        }
                    };
                    name.push(n);
                    idx++;
                } else {
                    console.log("o.graphic", o.graphic);
                    o.graphic.splice(j + 2, l);
                    if (o.graphic.length <= 2) {
                        o.graphic[0].children[0].shape.x2 = 60;
                        o.graphic[0].children[1].shape.x2 = 60;
                        o.series[0].data = handleEvents.initSeriesData(opt.data);
                    };
                    name.splice(j + 1, l);
                    idx = j;
                    pos.leftCur -= pos.leftPlus * (l - j - 1);
                };

                o.geo.map = n;
                o.geo.zoom = 0.4;
                i.clear();
                i.setOption(o);
                this.zoomAnimation();
                opt.callback(n, o, i);
            },

            /**
             * name 地图名
            **/
            createBreadcrumb: function (name) {
                var cityToPinyin = {
                    "南昌市": "nanchang",
                    "景德镇市": "jingdezhen",
                    "萍乡市": "pingxiang",
                    "九江市": "jiujiang",
                    "新余市": "xinyu",
                    "鹰潭市": "yingtan",
                    "赣州市": "ganzhou",
                    "吉安市": "jian",
                    "宜春市": "yichun",
                    "抚州市": "fuzhou",
                    "上饶市": "shangrao"
                };
                var breadcrumb = {
                    type: 'group',
                    id: name,
                    left: pos.leftCur + pos.leftPlus,
                    top: pos.top + 3,
                    children: [{
                        type: 'polyline',
                        left: -90,
                        top: -5,
                        shape: {
                            points: line
                        },
                        style: {
                            stroke: '#fff',
                            key: name
                            // lineWidth: 2,
                        },
                        onclick: function () {
                            var name = this.style.key;
                            handleEvents.resetOption(chart, option, name);
                        }
                    }, {
                        type: 'text',
                        left: -68,
                        top: 'middle',
                        style: {
                            text: name,
                            textAlign: 'center',
                            fill: style.textColor,
                            font: style.font
                        },
                        onclick: function () {
                            var name = this.style.text;
                            handleEvents.resetOption(chart, option, name);
                        }
                    }, {
                        type: 'text',
                        left: -68,
                        top: 10,
                        style: {

                            name: name,
                            text: cityToPinyin[name] ? cityToPinyin[name].toUpperCase() : '',
                            textAlign: 'center',
                            fill: style.textColor,
                            font: '12px "Microsoft YaHei", sans-serif',
                        },
                        onclick: function () {
                            // console.log(this.style);
                            var name = this.style.name;
                            handleEvents.resetOption(chart, option, name);
                        }
                    }]
                }

                pos.leftCur += pos.leftPlus;

                return breadcrumb;
            },

            // 设置effectscatter
            initSeriesData: function (data) {
                var temp = [];
                console.log("data", data);
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        temp.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value, data[i].level)
                        });
                    }
                };
                return temp;
            },

            zoomAnimation: function () {
                var count = null;
                var zoom = function (per) {
                    if (!count) count = per;
                    count = count + per;
                    // console.log(per,count);
                    chart.setOption({
                        geo: {
                            zoom: count
                        }
                    });
                    if (count < 1) window.requestAnimationFrame(function () {
                        zoom(0.2);
                    });
                };
                window.requestAnimationFrame(function () {
                    zoom(0.2);
                });
            }
        };

        var option = {
            // backgroundColor: opt.bgColor,
            graphic: [
                {
                    type: 'group',
                    left: pos.left,
                    top: pos.top - 4,
                    children: [{
                        type: 'line',
                        left: 0,
                        top: -20,
                        shape: {
                            x1: 0,
                            y1: 0,
                            x2: 60,
                            y2: 0
                        },
                        style: {
                            stroke: style.lineColor,
                        }
                    }, {
                        type: 'line',
                        left: 0,
                        top: 20,
                        shape: {
                            x1: 0,
                            y1: 0,
                            x2: 60,
                            y2: 0
                        },
                        style: {
                            stroke: style.lineColor,
                        }
                    }]
                }, {
                    id: name[idx],
                    type: 'group',
                    // left: pos.left + 2,
                    left: 10,
                    // top: pos.top,
                    top: 10,
                    children: [{
                        type: 'polyline',
                        left: 90,
                        top: -12,
                        shape: {
                            points: line
                        },
                        style: {
                            stroke: 'transparent',
                            key: name[0]
                        },
                        onclick: function () {
                            console.log('click');
                            var name = this.style.key;
                            handleEvents.resetOption(chart, option, name);
                        }
                    }, {
                        type: 'text',
                        left: 0,
                        // top: 'middle',
                        top: 0,
                        style: {
                            text: name[0] === '南京' ? '南京市' : name[0],
                            textAlign: 'center',
                            fill: style.textColor,
                            font: style.font
                        },
                        // 点击标题触发
                        onclick: function () {
                            console.log('click');
                            handleEvents.resetOption(chart, option, '南京');
                        }
                    }]
                }
            ],
            geo: {
                tooltip: {
                    trigger: 'item',
                    textStyle: {
                        color: '#fff'
                    },
                    backgroundColor: '#032e43',  // 修改背景颜色
                    borderColor: '#16d0ff',  // 修改字体颜色
                    formatter: function (params) {  //使用formatter函数修改需要的样式
                        // let res= '<div class="tanchuan"><img src="../images/tanchuan.png" alt="" class="tanchuan-img" style=""></div>'
                        // let res='<div>11111111</div><div>222222</div>'
                        // return "1111"
                        let res = '<div>';
                        res += '<div style="color:#fff;padding:0% 0%;font-size:12px">' + '宅基地面积:' + '<span style="margin-left:50px;">' + '1198平方米' + '</span>' + '</div>' + '<div style="color:#fff;font-size:12px">' + '宅基地宗数:' + '<span style="margin-left:50px;">' + '2129宗' + '</span>' + '</div>'
                        // 第三行
                        res += '<div style="color:#fff;font-size:12px">' + '农户户数：' + '<span style="margin-left:50px;">' + '3215户' + '</span>' + '</div>';
                        // 第四行
                        res += '<div style="color:#fff;font-size:12px">' + '一户多宅数:' + '<span style="margin-left:50px;">' + '21345户' + '</span>' + '</div>';
                        // 第五行
                        res += '<div style="color:#fff;font-size:12px">' + '超占面积:' + '<span style="margin-left:50px;">' + '22123平方米' + '</span>' + '</div>';
                        res += '</div>'
                        return res
                    }
                },
                map: opt.mapName,
                // roam: true,
                zoom: 1,
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(147, 235, 248, 1)',
                        borderWidth: 1,
                        areaColor: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(128, 217, 248, 1)',
                        // shadowColor: 'rgba(255, 255, 255, 1)',
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10
                    },
                    emphasis: {
                        areaColor: '#389BB7',
                        borderWidth: 0
                    }
                },
                regions: opt.activeArea.map(function (item) {
                    if (typeof item !== 'string') {
                        return {
                            name: item.name,
                            itemStyle: {
                                normal: {
                                    areaColor: item.areaColor || '#389BB7'
                                }
                            },
                            label: {
                                normal: {
                                    show: item.showLabel,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            }
                        }
                    } else {
                        return {
                            name: item,
                            itemStyle: {
                                normal: {
                                    borderColor: '#91e6ff',
                                    areaColor: '#389BB7'
                                }
                            }
                        }
                    }
                })
            },
            tooltip: {
                trigger: 'item',
                textStyle: {
                    color: '#fff'
                },
                backgroundColor: '#032e43',  // 修改背景颜色
                borderColor: '#16d0ff',  // 修改字体颜色
                formatter: function (params) {  //使用formatter函数修改需要的样式
                    // let res= '<div class="tanchuan"><img src="../images/tanchuan.png" alt="" class="tanchuan-img" style=""></div>'
                    // let res='<div>11111111</div><div>222222</div>'
                    return "1111"
                    let res = '<div>';
                    res += '<div style="color:#fff;padding:0% 0%;font-size:12px">' + '宅基地面积:' + '<span style="margin-left:50px;">' + '1198平方米' + '</span>' + '</div>' + '<div style="color:#fff;font-size:12px">' + '宅基地宗数:' + '<span style="margin-left:50px;">' + '2129宗' + '</span>' + '</div>'
                    // 第三行
                    res += '<div style="color:#fff;font-size:12px">' + '农户户数：' + '<span style="margin-left:50px;">' + '3215户' + '</span>' + '</div>';
                    // 第四行
                    res += '<div style="color:#fff;font-size:12px">' + '一户多宅数:' + '<span style="margin-left:50px;">' + '21345户' + '</span>' + '</div>';
                    // 第五行
                    res += '<div style="color:#fff;font-size:12px">' + '超占面积:' + '<span style="margin-left:50px;">' + '22123平方米' + '</span>' + '</div>';
                    res += '</div>'
                    return 22222

                    return res
                }
            },
            series: [{
                type: 'effectScatter',
                coordinateSystem: 'geo',
                // symbol: 'diamond',
                showEffectOn: 'render',
                rippleEffect: {
                    period: 15,
                    scale: 6,
                    brushType: 'fill'
                },
                hoverAnimation: true,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return levelColorMap[params.value[3]];
                        },
                        shadowBlur: 10,
                        // shadowColor: '#333'
                    }
                },
                data: handleEvents.initSeriesData(opt.data)
            }]
        };

        chart.setOption(option);
        // 添加事件
        chart.on('click', function (params) {
            // console.log('333click',opt,params,name[idx]);
            var _self = this;
            if (opt.goDown && params.name !== name[idx]) {
                if (cityMap[params.name]) {
                    var url = cityMap[params.name];
                    $.get(url, function (response) {
                        console.log("res", response);
                        curGeoJson = response;
                        echarts.registerMap(params.name, response);
                        handleEvents.resetOption(_self, option, params.name);
                    });
                }
            }
        });

        chart.setMap = function (mapName) {
            var _self = this;
            if (mapName.indexOf('市') < 0) mapName = mapName + '市';
            var citySource = cityMap[mapName];
            if (citySource) {
                var url = './map/' + citySource + '.json';
                $.get(url, function (response) {
                    // console.log(response);
                    curGeoJson = response;
                    echarts.registerMap(mapName, response);
                    handleEvents.resetOption(_self, option, mapName);
                });
            }
            // handleEvents.resetOption(this, option, mapName);
        };

        return chart;
    };

    $.getJSON(nanjing, function (geoJson) {
        echarts.registerMap('南京', geoJson);
        var myChart = echarts.extendsMap('echart9', {
            // bgColor: '#154e90', // 画布背景色 画布颜色
            mapName: '南京',    // 地图名
            goDown: true,       // 是否下钻
            // 下钻回调
            callback: function (name, option, instance) {
                console.log(name, option, instance);
            },


        });
    })
    myChart1.setOption(option1);
    myChart2.setOption(option2);
    myChart3.setOption(option3);
    myChart4.setOption(option4);
    myChart5.setOption(option5);
    myChart6.setOption(option6);
    myChart7.setOption(option7);
    myChart8.setOption(option8);
    // 鼠标划入流转情况，变更label激活样式
    myChart5.on('mouseover', function (params) {
        if (params.name === "") return;
        // console.log('params', params, params.name);
        myChart5.setOption({
            series: [
                {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                        [
                            { offset: 1, color: '#527cca' },
                            { offset: 0.5, color: '#527cca' },
                            { offset: 0, color: '#fbb900' }
                        ]                //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                    ),
                    name: '外边框',
                    type: 'pie',
                    clockWise: false, //顺时加载
                    hoverAnimation: false, //鼠标移入变大
                    center: ['50%', '50%'],
                    radius: ['65%', '65%'],
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                        value: 9,
                        name: '',
                        itemStyle: {
                            normal: {
                                borderWidth: 2,
                                borderColor: "#003463",
                            }
                        }
                    }]
                },
                {
                    type: 'pie',
                    hoverAnimation: false,
                    legendHoverLink: false,
                    radius: ['48%', '55%'],
                    color: ['#3efaf9', '#00d0fc', '#b040ff', '#f66967', '#f1b563', '#f1b563', '#fc4a00'],
                    label: {
                        normal: {
                            show: false,
                            position: 'inner'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        },
                    },
                    tooltip: {
                        show: false,
                    },

                    data: [{
                        value: 100,
                        name: '转让'
                    },
                    {
                        value: 100,
                        name: '互换'
                    },
                    {
                        value: 100,
                        name: '入股'
                    },
                    {
                        value: 100,
                        name: '赠与'
                    },
                    {
                        value: 100,
                        name: '出租'
                    },
                    {
                        value: 100,
                        name: '其他'
                    }]
                }, {
                    type: 'pie',
                    radius: ['43%', '55%'],
                    color: ['#00FFFF', '#44EAB1', '#7BDD43', '#FEBE12', '#EBEC2F', '#FF7C44', '#FA3E5F', '#6635EF', '#FFAFDA'],
                    labelLine: {
                        normal: {
                            show: true,
                            length: 10,
                            length2: 0,
                            lineStyle: {
                                width: 2,
                                color: 'transparent'
                            }
                        }
                    },
                    label: {
                        show: true,
                        formatter: name => {
                            if (name.name === params.name) {
                                switch (name.name) {
                                    case "转让":
                                        var before = "{name1|" + name.name + "}";
                                        return (before + " " + "{name1|" + name.value + "   " + name.percent.toFixed(1) + "%}");
                                    case "互换":
                                        var before = "{name2|" + name.name + "}";
                                        return (before + " " + "{name2|" + name.value + "   " + name.percent.toFixed(1) + "%}");
                                    case "入股":
                                        var before = "{name3|" + name.name + "}";
                                        return (before + " " + "{name3|" + name.value + "   " + name.percent.toFixed(1) + "%}");
                                    case "赠与":
                                        var before = "{name4|" + name.name + "}";
                                        return (before + " " + "{name4|" + name.value + "   " + name.percent.toFixed(1) + "%}");
                                    case "出租":
                                        var before = "{name5|" + name.name + "}";
                                        return (before + " " + "{name5|" + name.value + "   " + name.percent.toFixed(1) + "%}");
                                    case "其他":
                                        var before = "{name6|" + name.name + "}";
                                        return (before + " " + "{name6|" + name.value + "   " + name.percent.toFixed(1) + "%}");

                                }
                                // var before = "{name1|" + name.name + "}";
                                // return (before + " " + "{name1|" + name.value + "   " + name.percent.toFixed(1) + "%}");
                            }
                            var before = "{name|" + name.name + "}";
                            return (before + " " + "{name|" + name.value + "   " + name.percent.toFixed(1) + "%}");
                        },
                        rich: {
                            name: {
                                color: '#fff',
                                borderWidth: 1,
                                borderRadius: 20,
                                fontSize: 12,
                                lineHeight: 20,
                            },
                            name1: {
                                color: '#3efaf9',
                            },
                            name2: {
                                color: "#00e4ff"
                            },
                            name3: {
                                color: "#b040ff"
                            },
                            name4: {
                                color: "#f66967"
                            },
                            name5: {
                                color: "#f1b563"
                            },
                            name6: {
                                color: "#f1b563"
                            }

                        },

                    },
                    data: [
                        {
                            value: 100,
                            name: '转让'
                        },
                        {
                            value: 100,
                            name: '互换'
                        },
                        {
                            value: 100,
                            name: '入股'
                        },
                        {
                            value: 100,
                            name: '赠与'
                        },
                        {
                            value: 100,
                            name: '出租'
                        },
                        {
                            value: 100,
                            name: '其他'
                        }
                    ]
                }]
        })
    });
    myChart5.on('mouseout', function (params) {
        myChart5.setOption(option5)
    })

}